<template>
  <div style="margin-top: 22px">
    <p>
      时间<i style="width: 14px; display: inline-block"></i>
      <el-input
        type="text"
        v-model="date"
        placeholder="请输入   例：2022 / 202201"
        style="width: 16%"
        @keyup.enter.native="search()"
      ></el-input>
      <el-button type="primary" @click="search()">查询</el-button>
    </p>
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%; margin-top: 22px"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :span-method="arraySpanMethod"
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column :label="title">
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="type" label="项目"></el-table-column>
        <el-table-column prop="ajsl" label="案件数量"> </el-table-column>
        <el-table-column prop="ajsr" label="实收金额"> </el-table-column>
        <el-table-column prop="ysje" label="应收金额"> </el-table-column>
        <el-table-column prop="pjajdj" label="平均案件单价"> </el-table-column>
        <el-table-column prop="ajcb" label="成本"> </el-table-column>
        <el-table-column prop="ajml" label="毛利"> </el-table-column>
        <el-table-column prop="ajmll" label="毛利率"> </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import { getList } from "@/api/financialManagement/budget";
export default {
  name: "BudgetManagement",
  props: {
    year: {
      type: String,
    },
  },
  watch: {
    year(newValue) {
      this.gettable();
    },
  },
  data() {
    return {
      tableData: [],
      spanArr: [],
      title: "",
      date: "",
    };
  },
  methods: {
    mergeTable() {
      var index;
      this.spanArr = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (i == 0) {
          this.spanArr.push(1);
          index = 0;
        } else {
          if (this.tableData[i].date == this.tableData[i - 1].date) {
            this.spanArr[index] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            index = i;
          }
        }
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return [_row, _col];
      }
    },
    download() {
      // window.location.href = "api/cwlist/export?input=" + this.text;
    },
    search() {
      if (this.date) {
        var par;
        par = {
          input: this.date + "",
          qyid: Number(localStorage.getItem("companyId")),
        };
        getList(par).then((res) => {
          this.tableData = res.data;
          this.table(this.tableData);
          this.mergeTable();
        });
      }
    },
    gettable() {
      if (this.year) {
        this.title = this.year + "年实际/预算数据分析表";
        var par;
        par = {
          input: this.year + "",
          qyid: Number(localStorage.getItem("companyId")),
        };
        getList(par).then((res) => {
          this.tableData = res.data;
          this.table(this.tableData);
          this.mergeTable();
        });
      } else {
        let nowDate = new Date();
        let a = nowDate.getFullYear() + "";
        this.title = a + "年实际/预算数据分析表";
        var par;
        par = {
          input: a + "",
          qyid: Number(localStorage.getItem("companyId")),
        };
        getList(par).then((res) => {
          this.tableData = res.data;
          this.table(this.tableData);
          this.mergeTable();
        });
      }
    },
    table(arr) {
      arr.forEach((item, index) => {
        for (let key in item) {
          if (!item[key]) {
            item[key] = "";
          }
        }
      });
      arr.forEach((item, index) => {
        item.ajsr = item.sajsr + " / " + item.yajsr;
        item.ajsl = item.sajsl + " / " + item.yajsl;
        item.ysje = item.sysje + " / " + item.yysje;
        item.pjajdj = item.spjajdj + " / " + item.ypjajdj;
        item.ajcb = item.sajcb + " / " + item.yajcb;
        item.ajml = item.sajml + " / " + item.yajml;
        item.ajmll = item.sajmll + " / " + item.yajmll;
      });
    },
    getSummaries() {
      let sum = [];
      for (let n = 0; n < 14; n++) {
        sum[n] = 0;
      }
      this.tableData.forEach((item, index) => {
        sum[0] = sum[0] + Number(item.sajsl);
        sum[1] = sum[1] + Number(item.yajsl);
        sum[2] = sum[2] + Number(item.sajsr);
        sum[3] = sum[3] + Number(item.yajsr);
        sum[4] = sum[4] + Number(item.sysje);
        sum[5] = sum[5] + Number(item.yysje);
        // sum[6] = + Number(item.spjajdj)
        // sum[7] = +Number(item.ypjajdj)
        sum[8] = sum[8] + Number(item.sajcb);
        sum[9] = sum[9] + Number(item.yajcb);
        sum[10] = sum[10] + Number(item.sajml);
        sum[11] = sum[11] + Number(item.yajml);
        // sum[12] = + Number(item.sajmll)
        // sum[13] = +Number(item.yajmll)
      });
      if (sum[2] && sum[0]) {
        sum[6] = (sum[2] / sum[0]).toFixed(2);
      } else {
        sum[6] = 0;
      }
      if (sum[3] && sum[1]) {
        sum[7] = (sum[3] / sum[1]).toFixed(2);
      } else {
        sum[7] = 0;
      }
      if (sum[10] && sum[2]) {
        sum[12] = ((sum[10] / sum[2]) * 100).toFixed(2) + "%";
      } else {
        sum[12] = 0;
      }
      if (sum[11] && sum[3]) {
        sum[13] = ((sum[11] / sum[3]) * 100).toFixed(2) + "%";
      } else {
        sum[13] = 0;
      }
      var sumArr = [];
      sumArr[0] = "合计";
      sumArr[1] = "";
      sumArr[2] = sum[0] + " / " + sum[1];
      sumArr[3] = sum[2] + " / " + sum[3];
      sumArr[4] = sum[4] + " / " + sum[5];
      sumArr[5] = sum[6] + " / " + sum[7];
      sumArr[6] = sum[8] + " / " + sum[9];
      sumArr[7] = sum[10] + " / " + sum[11];
      sumArr[8] = sum[12] + " / " + sum[13];
      return sumArr;
    },
  },
  mounted() {
    this.gettable();
  },
};
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}

.el-form-item {
  padding: 0 10px;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

///deep/ input[type='number'] {
//    -moz-appearance: textfield;
//}

/deep/ .el-input__inner {
  padding: 0px 8px;
}

/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
  text-align: center;
}
</style>
